<template>
  <div class="text-tooltip">
    <el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top">
      <p :class="[twoLine? 'two-line':'over-flow', className]" @mouseover="onMouseOver(refName)">
        <span :ref="refName">{{ content||'-' }}</span>
      </p>
    </el-tooltip>
  </div>
</template>

<script>
export default {
    name: 'TextTooltip',
    props: {
        // 显示的文字内容
        content: {
            type: String,
            default: () => {
                return ''
            }
        },
        // 外层框的样式，在传入的这个类名中设置文字显示的宽度
        className: {
            type: String,
            default: () => {
                return ''
            }
        },
        // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
        refName: {
            type: String,
            default: () => {
                return ''
            }
        },
        twoLine: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isShowTooltip: true
        }
    },
    methods: {
        onMouseOver(str) {
            // 单行的
            const parentWidth = this.$refs[str].parentNode.offsetWidth
            const contentWidth = this.$refs[str].offsetWidth
            
            if (!this.twoLine) {
                // 判断是否开启tooltip功能
                if (contentWidth > parentWidth) {
                    this.isShowTooltip = false
                } else {
                    this.isShowTooltip = true
                }
            }
            if (this.twoLine) {
                // 2行的
                const parentHeight = this.$refs[str].parentNode.offsetHeight // 42,58
                const contentHeight = this.$refs[str].offsetHeight
                if (parentHeight >= 42) {
                    this.isShowTooltip = false
                } else {
                    this.isShowTooltip = true
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.two-line{
    display: -webkit-box;	
    line-clamp: 2;
    -webkit-line-clamp: 2; /* 定义文本的行数 */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow: -o-ellipsis-lastline;
    white-space: normal;
}
.wid190 {
    width: 100%;
}
p{
    margin: 0;
}
</style>
